<template>
<!--	<el-popover @show="loadShow" @hide="loadHide" placement="bottom" width="180" v-model="visible" trigger="click">-->
<!--		<div class="task-popover-header">-->
<!--			<span class="task-popover-header-title">变更状态</span>-->
<!--		</div>-->
<!--		<div class="task-popover-item-choose">-->
<!--			<div class="task-popover-line-choose">-->
<!--				<i class="iconfont task-popover-icon-choose" :class="itemData.icon" :style="{color:itemData.color}"></i>-->
<!--				<div class="task-popover-line-left-choose"></div>-->
<!--			</div>-->
<!--			<span class="task-popover-item-choose-type">{{ itemData.label }}</span>-->
<!--			<span class="task-popover-item-choose-title">可变更为:</span>-->
<!--		</div>-->
<!--		<div class="task-popover-item" @click="chooseItem(item)" v-for="(item,index) in itemForm"-->
<!--			v-if="item.label != itemData.label">-->
<!--			<div class="task-popover-line">-->
<!--				<div :class="[index == itemForm.length-1 ?'task-popover-line-left-half':'task-popover-line-left']">-->
<!--				</div>-->
<!--				<i class="iconfont icon-ziyuan task-popover-line-icon"></i>-->
<!--			</div>-->
<!--			<i class="iconfont task-popover-icon" :class="item.icon" :style="{color:item.color}"></i>-->
<!--			<span class="task-popover-item-item">{{ item.label }}</span>-->
<!--		</div>-->
<!--		-->
<!--	</el-popover>-->
  <el-button disabled>
    <i class="iconfont task-popover-botton-icon" :class="itemData.icon" :style="{color:itemData.color}"></i>
    <span class="task-popover-botton-title">{{itemData.label}}</span>
    <!--			<i class="details-popover-item-icon el-icon-arrow-down"-->
    <!--				:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>-->
  </el-button>
</template>

<script>
	import { docChange } from '@/api/doc.js'
	export default {
		name: "chooseStatus",
		data() {
			return {
				form: [{
						value: '00',
						label: '已上传',
						type: false,
						color: 'rgb(250, 145, 31)',
						icon: 'icon-yishangchuan',
						taskType: 0
					}, {
						value: '01',
						label: '待审批',
						type: false,
						color: 'rgb(100, 203, 148)',
						icon: 'icon-icon-daishenpi-copy',
						taskType: 0
					},
					{
						value: '02',
						label: '审批中',
						type: false,
						color: 'rgb(86, 198, 255)',
						icon: 'icon-shenhezhong-copy',
						taskType: 0
					},
					{
						value: '04',
						label: '已审批',
						type: false,
						color: 'rgb(70, 216, 171)',
						icon: 'icon-yiwancheng-copy',
						taskType: 0
					},
					{
						value: '05',
						label: '已驳回',
						type: false,
						color: 'rgb(80, 196, 27)',
						icon: 'icon-bohui',
						taskType: 0
					},
					{
						value: '06',
						label: '已过期',
						type: false,
						color: 'rgb(248, 120, 103)',
						icon: 'icon-yemian-1',
						taskType: 0
					},
				],
				itemForm: [],
				itemData: {
					value: '00',
					label: '已上传',
					type: false,
					color: 'rgb(250, 145, 31)',
					icon: 'icon-yishangchuan',
					taskType: 0
				},
				visible: false,
				selectType: false
			}
		},
		props: ['docForm'],
		watch: {
			docForm: {
				handler(val, oldval) {
					this.filterItem(val.status)
				},
				// 深度观察监听
				deep: true,
				immediate: true
			}
		},
		methods: {
			chooseItem(item) {
				var _this = this
				var data = {
					docId:_this.docForm.docId,
					status:item.value
				}
				docChange(data).then(res=>{
					_this.filterItem(item.value)
				})
			},
			filterItem(data) {
				var _this = this
				_this.itemForm = JSON.parse(JSON.stringify(_this.form))
				_this.itemForm.forEach(function(item, index) {
					if (item.value == data) {
						_this.itemData = item
						_this.visible = false
						_this.itemForm.splice(index, 1)
					}
				})
			},
			loadShow() {
				this.selectType = true
			},
			loadHide() {
				this.selectType = false
			}
		},
	}
</script>

<style scoped>
	.task-popover-header {
		padding: 10px 16px;
		border-bottom: 1px solid #dadee3;
		background-color: #f5f6f8;

	}

	.task-popover-header-title {
		font-size: 12px;
		color: #2e405e;
		font-weight: 700;
	}

	.task-popover-item {
		position: relative;
		height: 40px;
		padding: 10px 16px 10px 40px;
		cursor: pointer;
		-webkit-touch-callout: none;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.task-popover-item:hover {
		background-color: #f5f6f8;
	}

	.task-popover-item-item {
		color: #2e405e;
		font-size: 12px;
		line-height: 18px;
	}

	.task-popover-line {
		position: absolute;
		height: 40px;
		top: 0;
		left: 22px;
	}

	.task-popover-line-left {
		height: 40px;
		width: 1px;
		background-color: rgba(218, 222, 227, 0.9);
		position: absolute;
		left: 0;
		top: 0;
	}

	.task-popover-line-left-half {
		height: 10px;
		width: 1px;
		background-color: rgba(218, 222, 227, 0.9);
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 12px;
	}

	.task-popover-line-icon {
		font-size: 18px;
		color: #dadee3;
		line-height: 30px;
		position: absolute;
		left: -4px;
	}

	.task-popover-icon {
		font-size: 16px;
		margin-right: 5px;
	}

	.task-popover-item-choose {
		position: relative;
		height: 40px;
		padding: 10px 16px 10px 40px;
		cursor: pointer;
		-webkit-touch-callout: none;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.task-popover-item-choose-type {
		font-size: 14px;
		font-weight: bold;
		color: #333333;
	}

	.task-popover-item-choose-title {
		font-size: 12px;
		color: #909aaa;
		margin-left: 10px;
	}

	.task-popover-line-choose {
		height: 40px;
		position: absolute;
		left: 22px;
		top: 0;
		display: flex;
		align-items: center;
	}

	.task-popover-icon-choose {
		font-size: 16px;
		position: absolute;
		left: -8px;
	}

	.task-popover-line-left-choose {
		height: 12px;
		width: 1px;
		position: absolute;
		left: 0px;
		bottom: 0;
		background-color: rgba(218, 222, 227, 0.9);
	}

	.task-popover-botton-icon {
		font-size: 16px;
	}

	.rejected {
		color: rgb(236, 0, 25);
	}

	.completed {
		color: rgb(254, 188, 8);
	}

	.inProgress {
		color: rgb(74, 144, 226);
	}

	.toDo {
		color: rgb(254, 115, 0);
	}

	/deep/.el-button--mini.is-circle {}

	.task-popover-botton-title {
		font-size: 14px;
		color: #333333;
		margin-left: 5px;
	}

	.details-popover-item-icon {
		color: #909aaa;
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		margin-left: 5px;
	}

	.transformIcon {
		transform: rotateZ(-180deg);
	}

	.transformIconChoose {
		transform: rotateZ(0deg);
	}
</style>

<style>
	.el-popper {
		padding: 0px !important;
	}
</style>
